<template>
  <div class="">
    <van-sticky>
      <van-search
        shape="round"
        background="#4fc08d"
        placeholder="请输入搜索关键词"
        @click="gotosearch"
      />
    </van-sticky>
    <div class="ms">
      <ul>
        <li v-for="(item, index) in goods" :key="index">
          <img :src="item.img" alt="" /><br />
          {{ item.title }}
        </li>
      </ul>
    </div>
    <div class="Pz">
      <div class="pzs">
        <span>品质套餐</span>
        <br />
        <span>佩奇几圈吃得好</span>
        <br />
        <span>立即抢购</span>
      </div>
      <img src="\img\01.jpg" alt="" />
    </div>
    <h4>-推荐商家-</h4>
    <van-card
      v-for="(item, index) in list"
      :key="index"
      price="2.00"
      desc="描述信息"
      :title="item.restaurant.name"
      :thumb="item.restaurant.image_path"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      goods: [],
    };
  },
  mounted() {
    if (this.$route.params.value == undefined) {
      this.$axios.get("list.json").then((res) => {
        this.list = res.data.items;
        this.list.filter((item) => {
          var str = item.restaurant.image_path;
          var a = str.slice(0, 1);
          var b = str.slice(1, 3);
          var c = str.slice(3, str.length);
          console.log(a, b, c);
          return (item.restaurant.image_path =
            "https://cube.elemecdn.com/" + a + "/" + b + "/" + c + ".jpeg");
        });
      });
    } else {
      this.$axios.get("list.json").then((res) => {
        this.list = res.data.items.filter((item) => {
          return item.restaurant.name.includes(this.$route.params.value);
        });
      });
    }
    this.$axios.get("fenlei.json").then((res) => {
      console.log(res);
      this.goods = res.data;
    });
  },
  methods: {
    gotosearch() {
      this.$router.push({ path: "/about" });
    },
  },
};
</script>

<style lang="scss" scoped>
.ms {
  width: 100%;
  height: 195px;
  background: yellowgreen;
  ul {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  li {
    width: 25%;
    line-height: 20px;
    padding-top: 10px;
    img {
      width: 60px;
      height: 60px;
    }
  }
}
.Pz {
  width: 100%;
  display: flex;
  justify-content: space-around;
  height: 100px;
  background: #cccccc;
  line-height: 33px;
  img {
    width: 70px;
    height: 70px;
    display: inline-block;
    padding-top: 15px;
  }
}
h4 {
  padding-top: 10px;
}
</style>
